// 该文件主要定义全局的样式变量，例如颜色，字体大小等等
@use 'sass:color';
// 主题色
$colors: (primary: #409eff,
  success: #67c23a,
  warning: #e6a23c,
  danger: #f56c6c,
  info: #909399);

:root {

  // 接下来我们需要生成主题色和不同亮度的颜色
  @each $val,
  $color in $colors {
    // 生成主题颜色
    --daai-color-#{$val}: #{$color};

    // 还需要生成不同亮度的颜色
    @for $i from 1 through 4 {
      --daai-color-#{$val}-light-#{2 * $i + 1}: #{color.mix(#fff, $color, ((2 * $i + 1) * 10 * 1%))};
    }

    // dark2 和 light8 因为不符合上面的规律，我们在下面单独来生成
    --daai-color-#{$val}-light-8: #{color.mix(#fff, $color, 80 * 1%)}; // 80% 亮度
    --daai-color-#{$val}-dark-2: #{color.mix(
 #000,
    $color,
    20 * 1%)
  }

  ; // 注意，dark是和黑色进行混合，20% 亮度
}

// 接下来，还有一些其他的颜色变量
// 对应的是 ElementUI 里面的中性色
--daai-color-white: #fff;
--daai-color-black: #000;
--daai-bg-color: #ffffff;
--daai-bg-color-page: #f2f3f5;
--daai-bg-color-overlay: #ffffff;
--daai-text-color-primary: #303133;
--daai-text-color-regular: #606266;
--daai-text-color-secondary: #909399;
--daai-text-color-placeholder: #a8abb2;
--daai-text-color-disabled: #c0c4cc;
--daai-border-color: #dcdfe6;
--daai-border-color-light: #e4e7ed;
--daai-border-color-lighter: #ebeef5;
--daai-border-color-extra-light: #f2f6fc;
--daai-border-color-dark: #d4d7de;
--daai-border-color-darker: #cdd0d6;
--daai-fill-color: #f0f2f5;
--daai-fill-color-light: #f5f7fa;
--daai-fill-color-lighter: #fafafa;
--daai-fill-color-extra-light: #fafcff;
--daai-fill-color-dark: #ebedf0;
--daai-fill-color-darker: #e6e8eb;
--daai-fill-color-blank: #ffffff;

// 和 border 相关的变量
--daai-border-width: 1px;
--daai-border-style: solid;
--daai-border-color-hover: var(--daai-text-color-disabled);
--daai-border: var(--daai-border-width) var(--daai-border-style) var(--daai-border-color);
--daai-border-radius-base: 4px;
--daai-border-radius-small: 2px;
--daai-border-radius-round: 20px;
--daai-border-radius-circle: 100%;

// 和 font 相关的变量
--daai-font-size-extra-large: 20px;
--daai-font-size-large: 18px;
--daai-font-size-medium: 16px;
--daai-font-size-base: 14px;
--daai-font-size-small: 13px;
--daai-font-size-extra-small: 12px;
--daai-font-family: 'Helvetica Neue',
Helvetica,
'PingFang SC',
'Hiragino Sans GB',
'Microsoft YaHei',
'\5fae\8f6f\96c5\9ed1',
Arial,
sans-serif;
--daai-font-weight-primary: 500;

// 和 disabled 相关的变量
--daai-disabled-bg-color: var(--daai-fill-color-light);
--daai-disabled-text-color: var(--daai-text-color-placeholder);
--daai-disabled-border-color: var(--daai-border-color-light);

// 和 transition 过渡相关的变量
--daai-transition-duration: 0.3s;
--daai-transition-duration-fast: 0.2s;
}